<template>
  <div class="order-item">
    <div class="order-box">
      <div class="title">{{ order.orderNo }}</div>
      <div class="field">
        <span class="label">卡券号：</span>
        <span
          class="value">{{ order.cardSn }}</span>
      </div>
      <div class="field">
        <span class="label">姓名：</span>
        <span
          class="value">{{ order.realName }}</span>
      </div>
      <div class="field">
        <span class="label">用户账号：</span>
        <span
          class="value">{{ order.userName }}</span>
      </div>
      <div class="field">
        <span class="label">面值：</span>
        <span class="value">￥
          {{ order.cardFacevalue.toFixed(2) }}</span>
      </div>
      <div class="field">
        <span class="label">金额：</span>
        <span class="value">￥
          {{ order.actualAmount.toFixed(2) }}</span>
      </div>
      <div class="field">
        <span class="label">结算时间：</span>
        <span
          class="value">{{ order.updateTime }}</span>
      </div>
      <div class="footer">
        <Button size="mini"
          style="margin-left: auto;"
          @click="handleDel(order)" type="warning">
          转移订单
        </Button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Button } from 'vant';
import type { PropType } from 'vue';

import type TransOrderItem from '../models/TransOrderItem';

defineProps({
  order: {
    type: Object as PropType<TransOrderItem>,
    default: () => ({}),
  },
});

const emit = defineEmits(['handle-trans']);
const handleDel = (order: TransOrderItem) => {
  emit('handle-trans', order);
};

</script>
<style lang="less" scoped>
.order-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 12px;
  gap: 2px;

  .title {
    width: 100%;
    text-align: left;
  }

  .field,
  .footer {
    width: 100%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .label {
      color: #999;
    }

    .tags {
      display: flex;
      align-items: center;
      flex-grow: 1;
      gap: 5px;
    }
  }

}
</style>
